<template>
	<view class="body">
			<view class="grid-head">
				<BaiduTTS
				:text="palytext" 
				 :play="shouldPlay"
				      @playEnd="onPlayEnd"
				      @playError="onPlayError"
				      @pause="onPause"
				      @resume="onResume"
				      @stop="onStop"
				></BaiduTTS>
			</view>
		
			<view class="page" >
					<view class="flex-body">
						
						<view class="Sider" @click="fixedPosition = !fixedPosition" :style="!fixedPosition ? { width: '400rpx' } : { width: '90rpx' }">
							<!-- 当Sider收起时只显示图标 -->
							<view v-if="fixedPosition">
								<view class="nav-item icon-container">
									<image src="../../static/avatar/login.png" class="icon-image"></image>
								</view>
								<view class="nav-item icon-container">
									<image src="../../static/avatar/SwitchModel.png" class="icon-image"></image>
								</view>
								<view class="nav-item icon-container">
									<image src="../../static/avatar/zxt.png" class="icon-image"></image>
								</view>
							</view>
							
							<!-- 当Sider展开时显示完整内容 -->
							<view v-else>
								<view class="nav-item expanded-item" @click.stop>
									<navigator url="/pages/login/login" class="icon-container">
										<image src="../../static/avatar/login.png" class="icon-image"></image>
									</navigator>
									<view class="text-container">
										<uni-icons type="info">注册 | 登录</uni-icons>
										
									</view>
									
								</view>
								
								<view class="nav-item expanded-item" @click.stop>
									<view class="icon-container">
										<image src="../../static/avatar/SwitchModel.png" class="icon-image"></image>
									</view>
									<view style="flex: 1;">
										<view class="picker-container">
										    <picker
										      mode="selector"
										      :range="Models"
										      :value="selectedModelIndex"
										      @change="handleModelChange"
										    >
										      <view class="text-container">{{ Models[selectedModelIndex] }}</view>
										    </picker>
										  </view>
									</view>
								</view>
								<view class="nav-item expanded-item" @click.stop>
									<view class="icon-container">
										<image src="../../static/avatar/zxt.png" class="icon-image"></image>
									</view>
									<navigator url="/pages/graph/graph" class="text-container">
										性能对比
									</navigator>
								</view>
								<view class="nav-item expanded-item" @click.stop>
									<view class="icon-container">
										<image src="../../static/avatar/zxt.png" class="icon-image"></image>
									</view>
									<navigator url="/pages/baidu/baidu" class="text-container">
										baidu
									</navigator>
								</view>
							</view>
						</view>
						<scroll-view
						  scroll-y="true"
						  :scroll-into-view="lastMsgId"
						  style="height: 1200rpx;"
						>
						  <view class="content" id="chatList">
							<view v-for="(item, index) in historyChat" :key="index" :id="'msg-'+index">
							  <chat style="width: 100%;" :img_path="item.imgPath" :meg="item.message" :is_robot="item.robot" :UpImagePath="item.UpimgPath"></chat>
							</view>
						  </view>
						</scroll-view>
					</view>
				
					<view class="control">
						
						<!-- 可视化波形，只需创建需要用到的canvas就行，canvas需要指定宽高（下面style里指定了300*100） -->
						<view style="padding-top:5rpx"></view>
						<view class="recwave" :style="{display:Iscanvas ? 'block':'none'}">
							<canvas type="2d" class="recwave-WaveView"></canvas>
						</view>
						
						<view class="input_Data">
						  <view class="input-icon" @tap="voiceInput">
						    <image class="image" src="../../static/avatar/mic.png"></image>
						  </view>
						  <view class="input-center">
						    <textarea
						      v-if="!Isvoice"
						      class="textarea"
						      placeholder="快和我聊天吧!"
						      v-model="inputs"
						      :auto-height="true"
						      :maxlength="500"
						      :style="textareaStyle"
						      @input="onInput"
						      @focus="scrollToBottom"
						      @blur="scrollToBottom"
						      @confirm="sendmes"
						    ></textarea>
						    <button
						      v-else
						      class="voice-btn"
						      @touchstart="Recording"
						      @touchend="Recording"
						    >请按住说话</button>
						  </view>
						  <view class="input-icon">
						    <button
						      v-if="IsInput && !Isvoice"
						      class="send-btn"
						      size="mini"
						      type="primary"
						      @tap="sendmes"
						    >发送</button>
						    <image
						      v-else
						      class="image"
						      :src="Icons.other"
						      @tap="showExtend"
						    ></image>
						  </view>
						</view>

						<!--扩展功能-->
						<view class="Extend_Func" :style="{ display: Extend ? 'block' : 'none' }">
							<view class="upfile"><image class="upimage"  :src="Icons.imageUpload" mode="" @click="chooseImage">图片上传</image></view>
							<!-- <view class="upfile"><image class="upimage"  :src="Icons.fileUpload" mode="">文件上传</image></view> -->
						</view>
					
				</view>
				
			
			</view>

	</view>
</template>

<script>
	/**/

import {ref} from "vue";
/** 先引入Recorder （ 需先 npm install recorder-core ）**/
	import Recorder from 'recorder-core';
	import RecordApp from 'recorder-core/src/app-support/app.js';
	import 'recorder-core/src/engine/mp3.js';
	import 'recorder-core/src/engine/mp3-engine.js';
	import 'recorder-core/src/engine/wav.js'
	
	import 'recorder-core/src/extensions/waveview.js';
	import '../../uni_modules/Recorder-UniCore/app-uni-support.js';
	/** 需要编译成微信小程序时，引入微信小程序支持文件 **/
	// #ifdef MP-WEIXIN
	    import 'recorder-core/src/app-support/app-miniProgram-wx-support.js'
		
	// #endif

export default {
  data() {
    return {
	  Icons:{
		  stop:"../../static/avatar/stop.png",
		  playable:"../../static/avatar/playable.png",
		  imageUpload:"../../static/avatar/image.png",
		  fileUpload:"../../static/avatar/file.png",
		  other:"../../static/avatar/unfold.png"
	  
			},
      historyChat:[],// 历史记录列表
	  timeOutEvent:null,
	  inputs:'',
	  scrollTop:0,
	  Extend:false ,//是否显示底层扩展功能
	  IsInput:false ,//是否为输入状态
	  Isvoice:false,  //是否语音输入
	  Iscanvas:false, // 是否显示绘图区域
	  isRecording:true ,//true录音，fasle暂停
	  recpowerx:0,
	  recpowert:"",
	  fixedPosition:true, //侧边栏伸缩 
	  Models: ['U-Net', 'EGE-Unet'], // 选项数组
	  selectedModelIndex: 0, // 当前选中的索引
	  //文本框(textarea)自适应高度
	  textareaHeight: 48, // 初始高度
	  maxTextareaHeight: 180 ,// 最大高度
	  palytext:'',//要播报的文本
	  shouldPlay:false,//是否播报
	  
    };
  },
   watch: {
      shouldPlay(newVal, oldVal) {
        console.log(`之前的shouldPlay ${oldVal} 之后的shouldPlay ${newVal}`);
      }
    },
  created() {
		this.$Qwenchat.connectSocketInit();
		 
  },
  computed:{
	  textareaStyle() {
	      return {
	        minHeight: '48rpx',
	        maxHeight: this.maxTextareaHeight + 'rpx',
	        height: this.textareaHeight + 'rpx',
	        overflowY: this.textareaHeight >= this.maxTextareaHeight ? 'auto' : 'hidden'
	      }
	    },
		lastMsgId() {
		    // 返回最后一条消息的id
		    return this.historyChat.length ? 'msg-' + (this.historyChat.length - 1) : '';
		  }
  },
  methods: {
	  
	      // 发送消息到服务器
	      sendMessage() {
	        if (this.socket.readyState === this.socket.OPEN) {
	          this.socket.send({
	            data: this.message, // 发送的消息内容
	            success: () => {
	              console.log('消息发送成功');
	              this.messages.push(`我: ${this.message}`); // 将发送的消息也添加到列表
	              this.message = ''; // 清空输入框
	            },
	            fail: (err) => {
	              console.error('消息发送失败：', err);
	            },
	          });
	        } else {
	          console.error('WebSocket连接未打开');
	        }
	      },
	  /*----------------------------------------------------交互事件 Strat--------------------------------------------------------------------------*/
	//选择模型
	handleModelChange(e) {
	     this.selectedModelIndex = e.detail.value; // 更新选中的索引
	   },
	
	/**输入文字
	 * @param {Object} 
	 * H5下可用js动态调整textarea高度，超出最大高度出现滚动条。
	小程序下auto-height+max-height即可，超出自动滚动。
	语音按钮和输入框用同一容器，宽高样式一致，切换无跳动。
	 */
	onInput(e) {
	    // 兼容H5和小程序
	    let value = e.detail ? e.detail.value : e.target.value;
	    this.inputs = value;
	    this.IsInput = !!value.trim();
	
	    // 动态调整高度
	    this.$nextTick(() => {
	      // #ifdef H5
	      let textarea = this.$el.querySelector('.textarea');
	      if (textarea) {
	        textarea.style.height = 'auto';
	        let h = textarea.scrollHeight;
	        if (h > this.maxTextareaHeight) h = this.maxTextareaHeight;
	        this.textareaHeight = h;
	      }
	      // #endif
	      // #ifdef MP-WEIXIN
	      // 小程序textarea不支持动态高度，只能用auto-height
	      // 但max-height会生效，超出后自动滚动
	      // #endif
	    });
	  },
	
   /**
	* 滚动至聊天底部
	*/
   scrollToBottom() {
       // 只需触发视图更新即可，scroll-into-view会自动滚动
       // 可用this.$forceUpdate()或this.$nextTick()
       this.$nextTick(() => {});
     },
	//输入事件
	//文本输入状态
	//clike:录音与文本输入切换
	bindTextAreaBlur:function(envet){
			/*let values=envet.detail.value;
			values被inputs替代
			*/
			//判断是否为输入状态
			this.IsInput=true;
			if(this.inputs.length<=0){
				this.IsInput=false;

		}},
	//点击事件
	// 发送消息
	// 消息发送
	 sendmes:async function(e){
		//如果消息不为空
		if(!this.inputs|| !/^\s+$/.test(this.inputs)){
			/*拼接历史记录字符 start*/
			let historystr = "[";
			console.log("检查historyChat",this.historyChat);
			for (let i = 0; i < this.historyChat.length - 1; i += 2) {
				if(this.historyChat[i].message==null ||  this.historyChat[i + 1].message==null) continue;
				// i是我的消息，i+1是机器人的消息
			    historystr += "(" +"'"+ this.historyChat[i].message +"'"+ "," +"'"+ this.historyChat[i + 1].message +"'"+ ")";
			    if (i < this.historyChat.length - 2) {
			        historystr += ",";
			    }
			}
			historystr += "]";
			console.log(historystr)
			/*拼接历史记录字符 end*/
			
			/* 把我的消息添加到记录*/
			this.historyChat.push({
				 "imgPath": "../../static/avatar/user.jpg",
				 "message": this.inputs,
				 "robot": false
			})
			
			/*请求 本地大语言模型API */
			//测试webSocked
			let msg=await this.$Qwenchat.clickReques(this.inputs,historystr) ?? '';
			if(typeof msg =="Object" && msg.Object.hasOwnProperty("statusCode")){
				if(msg.statusCode==500) msg="服务器错误！"
			}
			
			this.inputs='';
			this.IsInput=false;
			
			/*将返回结果添加到记录*/
						let botMsgObj = {
						// 初始为空
						"imgPath": "../../static/avatar/robot.jpg",
						message: "", 
						"robot": true
						};
						// 1. 获取新消息应该插入的索引位置
							let msgListIndex = this.historyChat.length; 
						// 2.添加空message到消息列表
							this.historyChat.push(botMsgObj);
						// 3. 使用setTimeout实现逐字效果
							let currentIndex = 0; // 初始化当前字符索引
							const typeInterval = setInterval(() => {
								if (currentIndex < msg.length) {
								// 逐字追加到message
								this.historyChat[msgListIndex].message += msg.charAt(currentIndex);
								currentIndex++;
								this.$nextTick(() => {
								  this.scrollToBottom();
								});// 滚动到底部
								} else {
									clearInterval(typeInterval); // 停止间隔
										}
							}, 100);

		   
				
		} 
		else 
		{
			return uni.showToast({
				title: '不能发送空白消息',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'error',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		}

	   
	},
	//显示扩展区域
	showExtend:function(){
		this.Extend=!this.Extend;
		this.scrollToBottom();
	},
	// 语音输入时
	voiceInput:function(){
		this.Isvoice=!this.Isvoice;// 切换语音与文字输入
		this.Extend=false;// 关闭扩展区域
	},

	
 /*----------------------------------------------------交互事件 end--------------------------------------------------------------------------*/
	/*----------------------------------------录音 Start----------------------------------------------------------*/
	// 开始录音（无权限）
	startRecording() {
		
		let takeEcCount=0,takeEcSize=0;
		  
	      const options = {
	        type: 'mp3',
	        sampleRate: 16000,
	        bitRate: 16,
	        onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {
	         this.recpowerx=powerLevel;
	         this.recpowert=this.formatTime(duration,1)+" / "+powerLevel;
			 //H5、小程序等可视化图形绘制，直接运行在逻辑层；App里面需要在onProcess_renderjs中进行这些操作
	         // #ifdef H5 || MP-WEIXIN
	         if(this.waveView){
	         	this.waveView.input(buffers[buffers.length-1],powerLevel,sampleRate);
	         }
	         // #endif
	        },
			
	      };
		  RecordApp.Start(options,
			()=>{
				console.log("录音开始啦！");
			  	
			  	//创建音频可视化图形绘制，App环境下是在renderjs中绘制，H5、小程序等是在逻辑层中绘制，因此需要提供两段相同的代码（宽高值需要和canvas style的宽高一致）
			  	RecordApp.UniFindCanvas(this,[".recwave-WaveView"],`
			  		this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
			  	`,(canvas1)=>{
			  		this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
			  	});
			  
			  }, 
			  (meg)=>{console.log("录音失败咯：",meg);} 
			  )
		  
	    },
	// 获取权限后=>开始录音
		
	//获取录音权限
	getpromission(){
		    RecordApp.RequestPermission(() => {
		        console.log("已经获取权限！"); 
		        this.startRecording();
		      }, 
		        (msg) => {
		          console.error("请求录音权限失败：" + msg);
				  
		        });
	},
	//停止录音
	stopRecording(){
		
		RecordApp.Stop((aBuf,duration,mime)=>{
			//全平台通用：aBuf是ArrayBuffer音频文件二进制数据，可以保存成文件或者发送给服务器
			uni.request({
				url:"http://127.0.0.1:9099/audio",
				data:aBuf,
				method:'POST',
				success: (meg) => {
					console.log("语音发送成功！");
					console.log(meg);
					
					/* 把我的消息添加到记录*/
					this.historyChat.push({
						 "imgPath": "../../static/avatar/user.jpg",
						 "message": meg.data.text,
						 "robot": false
					})
					
					// 模型消息
					let botMsgObj = {
					// 初始为空
					"imgPath": "../../static/avatar/robot.jpg",
					message: "", 
					"robot": true
					};
					const msg=meg.data.res;
					this.palytext = msg;
					this.shouldPlay = true;
					// 1. 获取新消息应该插入的索引位置
						let msgListIndex = this.historyChat.length; 
					// 2.添加空message到消息列表
						this.historyChat.push(botMsgObj);
					// 3. 使用setTimeout实现逐字效果
						let currentIndex = 0; // 初始化当前字符索引
						
						const typeInterval = setInterval(() => {
							if (currentIndex < msg.length) {
							// 逐字追加到message
							this.historyChat[msgListIndex].message += msg.charAt(currentIndex);
							currentIndex++;
							this.$nextTick(() => {
							  this.scrollToBottom();
							});// 滚动到底部
							} else {
								clearInterval(typeInterval); // 停止间隔
									}
						}, 100);
					
					
				}
			});
			//App中如果在Start参数中提供了stop_renderjs，renderjs中的函数会比这个函数先执行
			
			var recSet=(RecordApp.GetCurrentRecOrNull()||{set:{type:this.recType}}).set;
			console.log("nIyX::已录制[{1}]：{2} {3}字节",":Recorded [{1}]: {2} {3}bytes",0,mime,this.formatTime(duration,1),aBuf.byteLength
					+" "+recSet.sampleRate+"hz "+recSet.bitRate+"kbps",2);
			
			var aBuf_renderjs="this.audioData";
			
		},(msg)=>{
			console.log("5VqK::结束录音失败：",":Failed to end recording:"+msg,1);
		});
		
			
			
	},
	//录音
	Recording(){
		if(this.isRecording)
		{	this.Iscanvas=!this.Iscanvas;
			this.getpromission();
			this.isRecording=false;
		}
		else{
			this.Iscanvas=!this.Iscanvas;
			this.stopRecording();
			this.isRecording=true;
		}
	},
	formatTime(ms,showSS){
		var ss=ms%1000;ms=(ms-ss)/1000;
		var s=ms%60;ms=(ms-s)/60;
		var m=ms%60;ms=(ms-m)/60;
		var h=ms, v="";
		if(h>0) v+=(h<10?"0":"")+h+":";
		v+=(m<10?"0":"")+m+":";
		v+=(s<10?"0":"")+s;
		if(showSS)v+="″"+("00"+ss).substr(-3);;
		return v;
	},
	//语音播报组件 start
	
	// 播放结束事件处理
	    onPlayEnd() {
	      console.log('播放已完成');
	      this.shouldPlay = false;
	    },
	    
	    // 播放错误事件处理
	    onPlayError(error) {
	      console.error('播放出错:', error);
	      this.shouldPlay = false;
	    },
	    
	    // 暂停事件处理
	    onPause() {
	      console.log('播放已暂停');
	    },
	    
	    // 继续播放事件处理
	    onResume() {
	      console.log('继续播放');
	    },
	    
	    // 停止播放事件处理
	    onStop() {
	      console.log('播放已停止');
	      this.shouldPlay = false;
	    },
		
		//语音墨宝end
	/*----------------------------------------录音 end----------------------------------------------------------*/
	
	/*从相册中选择文件  微信小程序*/
	chooseImage(){
		 const globalData = getApp().globalData
			
		if(globalData.token.length<=0){
			uni.showToast({
				title:"该功能需要登录后使用，请登录！",
				duration: 2000, // 提示的延迟时间，单位毫秒，默认为 1500
				mask: true, // 是否显示透明蒙层，防止触摸穿透，默认为 false
			})
			return;
		}
		  wx.chooseMedia({
		    count: 1, // 选择图片的数量，只需要选择一张图片
		    mediaType: ['image'],
		    sourceType: ['album'],
		    success:(res) => {
		      // 只关心第一张图片
		      const tempFilePath = res.tempFiles[0].tempFilePath;
			  this.historyChat.push({
			  	 "imgPath": "../../static/avatar/user.jpg",
			  	 "message": null,
			  	 "robot": false,
				 "UpimgPath":tempFilePath
			  })
			  
		      wx.uploadFile({
		        url: "http://127.0.0.1:9099/upimage", 
		        filePath: tempFilePath,
		        name: 'file', // 与后端约定的文件对应的 key, 
				formData:{"USID":globalData.USID,"name": this.selectedModelIndex==0 ? 'unet_aug' : 'egeunet'},
				header:{"Authorization":"Bearer "+globalData.token},
		        success:(resdata)=>{
		          console.log('图片上传成功');
				  console.log(resdata.data);//{"msg":"Missing Authorization Header"}
				  console.log(resdata.statusCode);
				  this.historyChat.push({
				  	 "imgPath": "../../static/avatar/robot.jpg",
				  	 "message": null,
				  	 "robot": true,
				  	"UpimgPath":resdata.data
				  })
				  if (resdata.statusCode === 401) {
				              // 服务器返回500错误，可能是授权失效
				              console.log('服务器返回500错误，授权可能已失效');
				              uni.redirectTo({
				                  url:"/pages/index/index",
				                  success() {
				                      uni.showToast({
				                          title: '授权可能已失效,请重新登录！',
				                          icon: 'error',
				                          duration: 2000
				                      });
				                  }
				              });
				  }
				  
				  
		          // 这里可以处理上传成功后的逻辑，比如解析服务器返回的数据
		        },
		        fail(err) {
		          console.error('图片上传请求错误:', err.errMsg);
		        }
		      });
		    },
		    fail(err) {
		      console.error('选择图片失败:', err.errMsg);
		    }
		  });
		
	},

  },
  
  
}
</script>

<style>
	
	.body{
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.grid-head{
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 70rpx;
		display: flex; justify-content: center;align-items: center;
		height: 40px;
		background-color: rgb(248, 248, 248);
	}

	 .flex-body{
		 width: 100%;
		 display: flex;
		 flex-direction: row;
		 
	 }
	 .Sider{
		     width: 90rpx;
		     height: 320rpx;
		     border-radius: 35rpx;
		     background-color: #333;
		     margin: 0;
			 display: flex; /* 使用flex布局 */
			             justify-content: center; /* 水平居中 */
			             align-items: center; /* 垂直居中 */
		     position: relative;
		     top: 30%;
		     padding-top: 20rpx;
		     transition: all 0.5s ease;
		     overflow: hidden; /* 防止内容溢出 */
		     z-index: 10; /* 防止被其他元素遮挡 */
		 
	 }
	 /* 统一的图标容器样式 */
	 .icon-container {
	     width: 50rpx;
	     height: 50rpx;
	     display: flex;
	     justify-content: center;
	     align-items: center;
	     
	     margin-bottom: 20rpx;
	 }
	 
	 /* 统一的图标样式 */
	 .icon-image {
	     width: 25px;
	     height: 25px;
	     border-radius: 50%;
	     box-shadow: 0 0 2px gray;
	 }
	 /* 展开状态的导航项 */
	 .nav-item {
	     position: relative;
	     width: 100%;
	 }
	 /* 展开状态的项目布局 */
	 .expanded-item {
	     display: flex;
	     flex-direction: row;
	     align-items: center;
	     padding: 10rpx 0;

		 margin-left: 20rpx;
	 }
	 
	 /* 文字容器样式 */
	 .text-container {
	     margin-left: 20rpx;
	     color: white;
	     flex: 1;
	 }
	.picker-container {
	  margin: 20rpx 0;
	}
	
	.page{
		  display: block;
		  flex-direction: column;
		  /* justify-content: center; */
		  height: 100%;
		  width: 100%;
		  
		  
	}

	.content{
		height: 100%;
		flex: 1;  /*占据剩余空间 */
		overflow-y: scroll; /* 滚动 */
		
		padding: 24rpx 0;
		/*子元素也使用flex布局*/
		display: flex;
		flex-direction: column;
		min-height: 520rpx;
	}

	.control{
		width: 100%;
		
		height: auto; /* 根据内容自动调整高度 */
		overflow: auto; /* 如果内容超出视图，显示滚动条 */
		/*margin: auto;*/
		box-shadow: 0 0 2rpx gainsboro;
		position: relative;
		
		
	}
	.recwave{
		border:1px solid #ccc;
		height:80px;
		width:300px;
		margin: auto 50rpx;
	}
	.recwave canvas{
		height:100rpx;
		width:300rpx;
	}
	
	.input_Data{
		  display: flex;
		  flex-direction: row;
		  align-items: flex-end;
		  padding: 10rpx 10rpx;
		  background: #f8f8f8;
		}
	.input-icon {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-shrink: 0;
	}
	.textarea,
	.voice-btn {
	  width: 100%;
	  min-height: 48rpx;
	  max-height: 180rpx;
	  padding: 12rpx 16rpx;
	  border-radius: 8rpx;
	  background: #fff;
	  font-size: 28rpx;
	  line-height: 1.5;
	  box-shadow: 0 0 2rpx #ccc;
	  border: none;
	  outline: none;
	  resize: none;
	  overflow-y: auto;
	  box-sizing: border-box;
	  transition: all 0.2s;
	  /* 保证两者切换时宽高一致 */
	  display: block;
	}
	.voice-btn {
	  color: #4f8cff;
	  background: #f0f4ff;
	  text-align: center;
	  font-size: 28rpx;
	  border: 1rpx solid #4f8cff;
	}
	
	.send-btn {
	  min-width: 80rpx;
	  height: 48rpx;
	  margin: 0 0 0 8rpx;
	  font-size: 28rpx;
	  border-radius: 8rpx;
	  padding: 0 16rpx;
	  background: #4f8cff;
	  color: #fff;
	  border: none;
	}
	.input-center {
	  display: flex;
	  align-items: center;
	  min-width: 0;
	  margin: 0 10rpx;
	  /* 保证中间区域自适应 */
	}
	.Extend_Func{
		/*默认隐藏*/
		display: none;
		height: 100rpx;	
		
	}
	.upfile{
		width: 80rpx;
		height: 80rpx;
		float: left;
		margin: 10rpx 20rpx;
		font-size: 10rpx;
		
		display: flex;
		align-items:center;
		
	}
	.upfile .upimage{
		width: 100%;
		height: 100%;
		box-shadow: 0 0 2rpx gray;
	}

		
	.input_Data .image{
		  width: 48rpx;
		  height: 48rpx;
		  border-radius: 50%;
		  background-color: white;
		  box-shadow: 0 0 2rpx gray;
	}
	.textarea{
		background-color: white;
		width: 300rpx;
		max-height: 45rpx;
		margin: auto 10rpx;
		box-shadow: 0 0 2rpx gray;
		border-radius: 5rpx;
	}
	/*发送*/
		
	.button{
		margin: auto 10rpx;
		display: none;
	}
</style>
